<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }
        h2{
            color: #333333;
            background-color: transparent;
        }
        a{
            color: #cc6600;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }
        li {
            float: left;
            padding: 1em;
            list-style: none;
        }
        #Gallery {
            list-style: none;
        }
        #Gallery li {
            margin: 0 20px 20px 0;
            padding: 0;
            display: inline;
        }
        #Gallery li a img {
            border: 0;
        }
    </style>
    <script>
        $(function () {
            $("#Gallery a").on("click",function () {
                let href=$(this).attr("href");
                $("#image").attr("src",href);
                let title=$(this).attr("title");
                $(".hint").text(title);
                return false;
            });
        });
    </script>
</head>
<body>
<h2>美女画廊</h2>
<ul id="Gallery">
    <li><a href="画廊图/1.jpg" title="美女A"><img src="画廊图/1-small.jpg" width="100" alt="美女1"/></a></li>
    <li><a href="画廊图/2.jpg" title="美女B"><img src="画廊图/2-small.jpg" width="100" alt="美女2"/></a></li>
    <li><a href="画廊图/3.jpg" title="美女C"><img src="画廊图/3-small.jpg" width="100" alt="美女3"/></a></li>
    <li><a href="画廊图/4.jpg" title="美女D"><img src="画廊图/4-small.jpg" width="100" alt="美女4"/></a></li>
</ul>
<div style="clear: both"></div>
<img src="画廊图/placeholder.png" alt="" id="image" width="450px">
<p class="hint">选择一张图片</p>
</body>
</html>